<template>
  <div class="login-expired-popup">
    <div class="content">
      <el-icon size="60" color="#999"><WarningFilled /></el-icon>
      <p class="is-error-text">登录过期，请重新登录！</p>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';

import { resetRouter } from '@/router/index.js';

// router
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

// modal,pinia
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const emit = defineEmits(['refresh']);

const handleConfirm = () => {
  resetRouter();
  router.push('/');
  modalStore.closeModal('login-expired-popup');
};
</script>

<style lang="scss" scoped>
.login-expired-popup {
  height: 320px;
  display: flex;
  flex-direction: column;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
